<template>
  <div class="split-container">
    <el-splitter direction="vertical">
      <el-splitter-panel :resizable="resizable">
        <transition name="fold" appear>
          <div v-if="showPanels[0]" class="dataAnalyzeModel  panel1">
            <router-link
                :to="{ name: 'elderlyAnalyze' }"
                target="_blank"
                class="content-area"
            >
              <div class="overlay">老人数据分析</div>
            </router-link>
          </div>
        </transition>
      </el-splitter-panel>
      <el-splitter-panel :resizable="resizable">
        <transition name="fold" appear>
          <div v-if="showPanels[1]" class="dataAnalyzeModel  panel2">
            <router-link
                :to="{ name: 'volunteerAnalyze' }"
                target="_blank"
                class="content-area"
            >
              <div class="overlay">志愿者数据分析</div>
            </router-link>
          </div>
        </transition>
      </el-splitter-panel>
      <el-splitter-panel>
        <transition name="fold" appear>
          <div v-if="showPanels[2]" class="dataAnalyzeModel panel3">
            <router-link
                :to="{ name: 'taskAnalyze' }"
                target="_blank"
                class="content-area"
            >
              <div class="overlay">任务数据分析</div>
            </router-link>

          </div>
        </transition>
      </el-splitter-panel>
    </el-splitter>
  </div>

<!--  <router-view></router-view>-->
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ActiveMap   from "../../components/volunteerData/activeMap.vue";

const resizable = ref(false)
const showPanels = ref([false, false, false])


// 页面加载动画延迟显示
onMounted(() => {
  setTimeout(() => (showPanels.value[0] = true), 100)
  setTimeout(() => (showPanels.value[1] = true), 500)
  setTimeout(() => (showPanels.value[2] = true), 900)
})


</script>

<style scoped>
/* 全局设置，防止滚动条干扰 */
html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
}

.split-container {
  height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden; /* 防止主容器出现滚动条 */
}

/* 优化分隔面板样式 */
.el-splitter {
  height: 100%;
}

.el-splitter__pane {
  overflow: hidden !important; /* 确保面板不出现滚动条 */
}

.dataAnalyzeModel {
  position: relative;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  will-change: transform; /* 优化性能 */
  transition: transform 0.3s ease-out;
}

/* 仅对内容区域应用悬停效果，避免与分隔条冲突 */
.content-area {
  height: 100%;
  width: 100%;
  transition: transform 0.3s ease-out;
}

.content-area:hover {
  transform: scale(1.02); /* 微调缩放比例 */
}

/* 文字遮罩 */
.overlay {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 30px;
  background-color: #ffffffcc;
  border-radius: 12px;
  padding: 12px 0;
  text-align: center;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

/* 背景图 */
.panel1 {
  background-image: url('./images/dataFive.jpg');
  background-size: 300% 100%;
  background-position: left center; /* 显示左侧三分之一 */
}

.panel2 {
  background-image: url('./images/dataFive.jpg');
  background-size: 300% 100%;
  background-position: center center; /* 显示中间三分之一 */
}

.panel3 {
  background-image: url('./images/dataFive.jpg');
  background-size: 300% 100%;
  background-position: right center; /* 显示右侧三分之一 */
}

/* 优化动画 */
.fold-enter-from {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

.fold-enter-active {
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的过渡曲线 */
}

.fold-enter-to {
  transform: scaleX(1);
  opacity: 1;
}
</style>